Design a simple Login & Signup form with validation using HTML, CSS & JavaScript

Hello readers! Welcome to my first blog. Since this is my first blog let me introduce myself first. I am Melani Sandalika an undergraduate of the Faculty of Information Technology, University of Moratuwa.

By going through this blog, you will be able to get an idea to create a simple login and signup form with validation using HTML, CSS & JavaScript.

A signup form is an HTML form that enables users to register in order to access a website, social media, or any other system. Login forms enable users to access that particular system by identifying and authenticating themselves. Let’s see how I have created this Login & Signup form step by step.

First, we have to create the web page structure using HTML. As you can see, this Login form and Signup form consist in same web page. First, create them separately.

To create the form, we need to use the tag. Login form is made up of three elements, text field for the username, password field for the password and submit field for the login button. Other than these three elements, Signup form includes email field for the user email address. tag does not have a closing tag.

Within the tag there is an attribute called id. It is used to access and manipulate the element in JavaScript and it can be used to style elements in CSS. Placeholder attribute shows the expected value of an input field.

Sample HTML Code:

Output:

By using CSS, we can add more color to our web page. There are three ways to insert a style sheet. You can use inline CSS by adding a style attribute to the relevant element and including CSS properties. If not, you can use internal CSS which is used inside the element, inside the section. Other way is create an external CSS file with the .css extension and link in the section of HTML file. It is a best practice to use external CSS file when developing a web page.

Then within the CSS file we can add styles to our web page using tag name, id and class. Here are some major CSS styles which I have used to style this web page.

Background image

We can add a background image to the body of the web page by using background-image property. Within the brackets mention the path to the background image.

Transparent box

Can be used the background-color property to add transparency to an element. Alpha parameter in the RGBA color value specifies the opacity of a color. 0.0 is full opacity and 1.0 is full opaque. We can change the alpha value as we want.

Login icon

We can use the following code sample to place the login icon at top of the form.

Input Elements

We can style the input fields using input[type= submit]. Within the square bracket, you have to mention the type of the input. By using the hover selector, we can change the property values smoothly when we mouse over them.

Sample CSS Code:

First create a JavaScript file with .js extension. Then link that JS file into the HTML file using tag. If we include the tag within the section, JavaScript file will load before loading the HTML file and may occurs few problems. So, it is a best practice to include the tag above the closing tag to speed up the website response time.

In order to display Login form and Signup form on one web page, we have to add an animation part using JavaScript and jquery. Therefore, include the jquery CDN within the tag.

As you can see on my web page, there are two links called “LOGIN” and “SIGNUP”. When you click LOGIN, Login form will appear on the web page. When you click “SIGNUP”, Login form will disappear, and Signup form will display on the web page.

Here we need to use onhashchange event which occurs when there have been changes to the hash. (hash is the anchor part of the URL which begins with # symbol) After that bind the hashchange event to $(window). Then when there is a change in hash, the callback will fire.

location.hash property return the anchor part of the URL and location.hash.slice(1) remove the # sign from hash data. When you click the SIGNUP link, the Signup page will appear and hash will change to #signup. Within the if condition check whether location.hash.slice(1) is equal to signup. Then move the Login form100% to right and display the Signup form on the web page.

User inputs can be validated by JavaScript. IN HTML file, within the tag include the onsubmit event type. Then the function can be called when the user tries to submit the form. You can use GET or POST as the method. But it is better to use the POST method as it is more secure than GET method.

Next, go to your JavaScript file and create the function. Then within the function, grab the values input by the user in the form field and check those values using the if/else block. We can use documents.getElementbyID(“ID_name”).value to grab the values input by the user. Then we need to assign those values to variables in order to use those values to check the conditions.

variable_name.length can be used to get the length of the input. Now we can check the required conditions by using if/else conditions and return true or false. If the user inputs are not valid function will return false. When the function returns true only, the user can log in or signup. Otherwise, the user will receive an error message.